Add Loading Skeletons and Empty States for Scan Dashboard UI

Overview

This PR improves the overall user experience of the scan-related pages by adding loading skeletons, reusable loading indicators, and informative empty states. These enhancements provide smooth visual feedback while API data is loading and improve the interface when no data is available.

Changes Made

1. Added Reusable Loading Components

LoadingSkeleton

Created a reusable skeleton component with multiple variants:

• Card
• List Item
• Table Row
• Metric
• Chart

This helps display placeholder layouts while data is being fetched.

LoadingIndicator

Added animated loading indicators with multiple styles:

• Spinner
• Dots
• Bars
• Pulse

Provides consistent loading animations across the application.

2. Added Empty State Component

EmptyState

Implemented a configurable empty state component for:

• Scans
• Reports
• Findings
• Assets

Features:

• Improved UI visuals
• Better user guidance
• Dynamic messaging
• Proper icon integration

Also fixed Hugeicons import issues related to empty state icons.

3. Added useLoadingState Hook

Created a custom hook for handling loading behavior efficiently.

Features:

• Centralized loading state management
• Flicker prevention
• Configurable loading delay
• Smooth UI transitions

4. Integrated Components into Pages

Updated the following pages:

• Dashboard
• Scans
• Reports

Each page now:

• Shows loading skeletons during API calls
• Displays proper empty states when no data exists
• Provides smoother transitions between loading and loaded content

Benefits

• Improved user experience during API loading
• Eliminates blank screen moments
• Consistent loading and empty state UI across pages
• Better perceived performance
• Cleaner and more professional interface
• Reduced UI flickering on fast requests

Testing

Verified Functionality

• Loading skeletons display correctly during API fetches
• Empty states appear properly when datasets are empty
• Smooth transitions between loading and loaded content
• No console errors or build warnings
• Components work correctly across all updated pages

Testing Steps

1. Run frontend:

npm run dev

2. Run backend:

python -m uvicorn backend.secuscan.main:app --reload --port 8000

3. Open:

http://127.0.0.1:5174/dashboard

4. Verify:

• Skeleton loaders appear during fetch
• Empty states appear when no data exists
• No UI flickering or console issues

Files Changed

• frontend/src/components/LoadingSkeleton.tsx
• frontend/src/components/EmptyState.tsx
• frontend/src/components/LoadingIndicator.tsx
• frontend/src/hooks/useLoadingState.ts
• frontend/src/pages/Dashboard.tsx
• frontend/src/pages/Scans.tsx
• frontend/src/pages/Reports.tsx

Type of Change

• New Feature
• Bug Fix
• Breaking Change
• Documentation Update

closes #53